<template>
	<view>
		<!-- 懒加载动画 -->
		<view>
			<navbar name="优惠券"></navbar>
			<view >
				<u-tabs height="100" item-width="240" bg-color="#fff" font-size="30rpx" bar-width="80"
					active-color="#F56767" :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<view v-show="current ==0">
				<view class="yhq-weishi" v-for="(item,idx) in discountsList" :key="idx">
					<view class="yhq-leftview">
						<image v-if="item.name == '兑换券'" class="duihuanqicon" src="http://static.bsyjk.cn/giftIcon/4E2566EFDA154655A3F10B9F437B4ACD.png"></image>
						<view class="yhq-zkText" v-if="item.name != '兑换券'">
							{{item.type == 0?'￥':''}}<text style="font-size: 50upx;">{{item.type == 1?item.discount:item.cashTicketAmt}}</text>{{item.type == 1?'折':''}}
						</view>
						满{{item.cashTicketCondition}}可用
					</view>
					<view class="yhq-centerview">
						<view class="yhq-centerview-title">
							{{item.name}}
						</view>
						<view class="yhq-centerview-c">
							{{item.startDate}}-{{item.expireDate}}
						</view>
						<view class="yhq-centerview-b">
							{{item.useNotice}}
						</view>
					</view>
					<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e" :path="item.detailUrl"
						extra-data="" version="release" hover-class="hoverbgfff">
					<view class="yhq-riteview">
						去使用
					</view>
					</navigator>
				</view>
			</view>
			<view v-show="current ==1">
				<view class="yhq-weishi" v-for="(item,idx) in discountsList" :key="idx" style="background: url(http://static.bsyjk.cn/DiscountCcc/45711B0AF32343A3AA2A4D809BE32C19.png)no-repeat;background-size: 100% 100%;">
					<view class="yhq-leftview">
						<image v-if="item.name == '兑换券'" class="duihuanqicon" src="http://static.bsyjk.cn/giftIcon/4E2566EFDA154655A3F10B9F437B4ACD.png"></image>
						<view class="yhq-zkText" v-if="item.name != '兑换券'">
							{{item.type == 0?'￥':''}}<text style="font-size: 50upx;">{{item.type == 1?item.discount:item.cashTicketAmt}}</text>{{item.type == 1?'折':''}}
						</view>
						满{{item.cashTicketCondition}}可用
					</view>
					<view class="yhq-centerview">
						<view class="yhq-centerview-title">
							{{item.name}}
						</view>
						<view class="yhq-centerview-c">
							{{item.startDate}}-{{item.expireDate}}
						</view>
						<view class="yhq-centerview-b">
							{{item.useNotice}}
						</view>
					</view>
					<view class="yhq-riteview">
						已使用
					</view>
				</view>
			</view>
			<view v-show="current ==2">
				<view class="yhq-weishi" v-for="(item,idx) in discountsList" :key="idx" style="background: url(http://static.bsyjk.cn/DiscountCcc/45711B0AF32343A3AA2A4D809BE32C19.png)no-repeat;background-size: 100% 100%;">
					<view class="yhq-leftview" >
						<image v-if="item.name == '兑换券'" class="duihuanqicon" src="http://static.bsyjk.cn/giftIcon/4E2566EFDA154655A3F10B9F437B4ACD.png"></image>
						<view class="yhq-zkText" v-if="item.name != '兑换券'">
							{{item.type == 0?'￥':''}}<text style="font-size: 50upx;">{{item.type == 1?item.discount:item.cashTicketAmt}}</text>{{item.type == 1?'折':''}}
						</view>
						满{{item.cashTicketCondition}}可用
					</view>
					<view class="yhq-centerview">
						<view class="yhq-centerview-title">
							{{item.name}}
						</view>
						<view class="yhq-centerview-c">
							{{item.startDate}}-{{item.expireDate}}
						</view>
						<view class="yhq-centerview-b">
							{{item.useNotice}}
						</view>
					</view>
					<view class="yhq-riteview">
						已过期
					</view>
				</view>
			</view>
			<view  v-if="discountsList.length ==0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
				<view class="noDataicon" >
				</view>
				暂无数据
			</view>
		</view>
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			uTabs,
			uLoading,
		},
		data() {
			return {
				loadingone:false,
				pageCurrent:1,//当前页数
				pageSize:10,//当前条数
				discountsList: [],
				list: [{
					name: '待使用',
				}, {
					name: '已使用',
				}, {
					name: '已过期',
				}],
				current: 0,
				sectionCurrent: 0,
			}
		},
		onLoad() {
			this.getCouponPageByWid(1,this.pageCurrent,this.pageSize)
		},
		onReachBottom: function() { //分页加载
			this.getCouponPageByWid(this.current+1,this.pageCurrent+=1,this.pageSize)
		},
		methods: {
			getCouponPageByWid(statusRange,pageCurrent,pageSize) {
				this.loadingone = true
				let _this = this;
				this.$shopnew.get(global.apiUrls.getCouponPageByWid + '?statusRange='+statusRange+'&keyword=&pageCurrent='+
				pageCurrent+'&pageSize='+pageSize+'&userId='+ uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {}).then(res => {
					if(res.data.code == 1000){
						let pageList = res.data.result.pageList;
						for(let i = 0;i<pageList.length;i++){
							pageList[i].startDate =_this.$basejs.dataTypeyhq(pageList[i].startDate*1)
							pageList[i].expireDate =_this.$basejs.dataTypeyhq(pageList[i].expireDate*1)
						}
						_this.discountsList = pageList;
					}else{

					}
					_this.loadingone = false
				})
			},
			change(index) {
				this.current = index;
				this.getCouponPageByWid(index+1,this.pageCurrent,this.pageSize)
			}
		}
	}
</script>

<style lang="scss">
	// 未领取优惠券
	.yhq-weishi{
		width: 700upx;
		height: 200upx;
		background: url(http://static.bsyjk.cn/DiscountRed/E51AA0BAD1F1463A980D70F8D908EF07.png)no-repeat;
		background-size: 700upx 200upx;
		margin: 20upx auto 0;
		border-radius: 6upx;
		display: flex;
		font-size: 24upx;
		color: #fff;

		.yhq-riteview{
			width: 140upx;
			line-height: 200upx;
			text-align: center;
			font-size: 30upx;
		}
		.yhq-centerview{
			width: 390upx;
			height: 100%;
			padding-left: 10upx;
			.yhq-centerview-title{
				font-size: 30upx;
				padding-top:40upx;
			}
			.yhq-centerview-c{
				font-size: 24upx;
				padding: 10upx 0;
			}
		}
		.yhq-leftview{
			width: 170upx;
			height: 200upx;
			text-align: center;
			.yhq-zkText{
				padding:40upx 0 10upx;
				font-size: 30upx;
			}
		}
	}
	.tabsView {
		position: relative;
	}
	.tabsView::before {
		content: '';
		width: 2upx;
		height: 50upx;
		position: absolute;
		top: 30upx;
		left: 241upx;
		background: #D6D6D6;
		border-radius: 3upx;
		opacity: 0.6;
	}

	.tabsView::after {
		content: '';
		width: 2upx;
		height: 50upx;
		position: absolute;
		top: 30upx;
		right: 248upx;
		background: #D6D6D6;
		border-radius: 3upx;
		opacity: 0.6;
	}

	.discounts-view {
		width: 701upx;
		margin: 30upx auto 0;
		display: flex;

		.discounts-bgimage,.discounts-bgimage2 {
			width: 233upx;
			height: 182upx;
			background: url(https://bsyjk-pic.bsyjk.cn/discounts/FC124FCFA5B94C0A8E2485FFAF306408.png)no-repeat;
			background-size:233upx 182upx;
			font-size: 60upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 182upx;
			text-align: center;
		}
		.discounts-bgimage2 {
			background: url(http://static.bsyjk.cn/youhuiicon/C610289290A14B0B89905512C6B05224.png)no-repeat;
			background-size:233upx 182upx;
		}
		.discounts-rview {
			width: 694upx;
			height: 182upx;
			background: #FFFFFF;
			padding: 13upx 0 0 26upx;
			.discounts-title{
				font-size: 38upx;
				font-weight: 400;
				color: #000000;
				line-height: 53upx;
				.loseEfficacy{
					width: 135upx;
					height: 53upx;
					font-size: 28upx;
					border-radius: 27rpx;
					background: #fff;
					border: 1px solid #F5F5F5;
					font-weight: 400;
					color: #9B9B9B;
					line-height: 40upx;
					padding: 0;
					float: right;
					margin-right: 10upx;
				}
			}
			.condition{
				font-size: 28upx;
				font-weight: 400;
				color: #9B9B9B;
				line-height: 40upx;
			}
			.line,.linec{
				width: 315upx;
				margin: 13upx 0 5upx;
				border-top:1px dotted #FF333A;
			}
			.linec{
				border-top:1px dotted #E2E1E2;
			}
			.deadline{
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #9B9B9B;
				line-height: 33upx;
			}
		}
	}
	.noDataicon{
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
	.duihuanqicon{
		display: block;
		width: 60upx;
		height: 60upx;
		margin: 40upx auto 10upx;
	}
</style>
